<!-- eslint-disable no-undef -->
<script setup lang="ts">
import { useLoginSuccess, useMobileCode } from '@/composable'
import { loginByPassworld, loginByCode } from '@/services/user'
import { useUserStore } from '@/stores'
import { mobileRules, passwordRules, codeRules } from '@/utils/rules'
import { showToast } from 'vant'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const loginSuccess = useLoginSuccess()

const agree = ref(false)
// 控制 显示图标/密码
const show = ref(false)
// 用户表单数据
const mobile = ref('')
const password = ref('')

// 短信验证码登录,页面切换
const isPass = ref(true)

// 登录操作:由isPass控制 手机号或短信验证码登录
const login = async () => {
  // 勾选 协议
  if (!agree.value) return showToast('请勾选用户协议')
  // 发请请求
  const res = isPass.value
    ? await loginByPassworld(mobile.value, password.value)
    : await loginByCode(mobile.value, code.value)
  // // 保存用户信息
  // store.setUser(res.data)
  // // 跳转登录之前的上一页,用router.replace() 可以不记录 登录页面 的历史记录
  // router.replace((route.query.returnUrl as string) || '/user')
  loginSuccess(res)
  showToast('登录成功')
}

// const code = ref('')
// 获取短信验证码
const {
  form,
  code,
  send: sendCode,
  time
} = useMobileCode(mobile, 'login', agree)

// 发送验证码,与验证码登录
// api接口函数
// 发送验证码逻辑
// 倒计时逻辑
// const form | null>(null)
// const time = ref(0)
// let timeId: number
// const sendCode = async () => {
//   // 勾选 协议
//   if (!agree.value) return showToast('请勾选用户协议')
//   // 时间>0 不作任何操作
//   if (time.value > 0) return
//   // 校验 手机号码是否正确,再发 请求
//   // validate需要传入name或name[]属性校验,返回promise,通过ref获取form表单方法
//   await form.value?.validate('mobile').then(async () => {
//     const res = await sendMobileCode(mobile.value, 'login')
//     code.value = res.data.code
//   })
//   showToast('发送验证码成功')
//   time.value = 60
//   // 开始倒计时之前,确保没有定时器存在
//   if (timeId) clearInterval(timeId)
//   timeId = setInterval(() => {
//     time.value--
//     // 小于零,清除 定时器
//     if (time.value <= 0) clearInterval(timeId)
//   }, 1000)
// }
// onUnmounted(() => {
//   clearInterval(timeId)
// })
// onMounted(() => {
//   // 组件渲染完毕，使用QC生成QQ登录按钮，目的得到跳转链接
//   QC.Login({
//     btnId: 'qq'
//   })
// })
const store = useUserStore()
const router = useRouter()
// 点击QQ登录,设置回调地址到仓库中
const click = () => {
  console.log(router.currentRoute.value.redirectedFrom?.fullPath)
  store.setReturnUrl(
    router.currentRoute.value.redirectedFrom?.fullPath as string
  )
  console.log(import.meta.env.VITE_APP_CALLBACK + '/login/callback')
}
// 设置 生产环境的QQ登录地址
const qqUrl = `https://graph.qq.com/oauth2.0/authorize?client_id=102015968&response_type=token&scope=all&redirect_uri=${encodeURIComponent(
  import.meta.env.VITE_APP_CALLBACK + '/login/callback'
)}`
</script>

<template>
  <div class="login-page">
    <cp-nav-bar
      right-text="注册"
      @change-right="$router.push('/register')"
    ></cp-nav-bar>
    <!-- 头部 -->
    <div class="login-head">
      <h3>{{ isPass ? '密码登录' : '短信验证码登录' }}</h3>
      <a href="javascript:;" @click.prevent="isPass = !isPass">
        <span>{{ isPass ? '短信验证码登录' : '密码登录' }}</span>
        <van-icon name="arrow"></van-icon>
      </a>
    </div>
    <!-- 表单 -->
    <van-form autocomplete="off" @submit="login" ref="form">
      <van-field
        name="mobile"
        v-model="mobile"
        placeholder="请输入手机号"
        type="tel"
        :rules="mobileRules"
        maxlength="11"
      ></van-field>
      <!-- 手机密码 -->
      <van-field
        v-if="isPass"
        v-model="password"
        :type="show ? 'text' : 'password'"
        placeholder="请输入密码"
        :rules="passwordRules"
        maxlength="22"
      >
        <template #button>
          <cp-icon
            @click="show = !show"
            :name="`login-eye-${show ? 'on' : 'off'}`"
          ></cp-icon>
        </template>
        <!-- <cp-icon
          @click="show = !show"
          :name="`login-eye-${show ? 'on' : 'false'}`"
        ></cp-icon> -->
      </van-field>
      <!-- 手机验证码 -->
      <van-field
        v-else
        v-model="code"
        type="number"
        placeholder="请输入验证码"
        :rules="codeRules"
        maxlength="6"
      >
        <template #button>
          <span
            class="btn-send"
            :class="{ active: time > 0 }"
            @click="sendCode"
            >{{ time > 0 ? `${time}秒后发送` : '发送验证码' }}</span
          >
        </template>
      </van-field>
      <div class="cp-cell">
        <van-checkbox v-model="agree">
          <span>我已同意</span>
          <a href="javascript:;">用户协议</a>
          <span>及</span>
          <a href="javascript:;">隐私条款</a>
        </van-checkbox>
      </div>
      <div class="cp-cell">
        <van-button native-type="submit" block round type="primary"
          >登 录</van-button
        >
      </div>
      <div class="cp-cell">
        <a href="javascript:;">忘记密码？</a>
      </div>
    </van-form>
    <!-- 底部 -->

    <div class="login-other">
      <van-divider>第三方登录</van-divider>
      <div class="icon" id="qq"></div>
      <a @click="click" :href="qqUrl" class="icon">
        <img src="@/assets/qq.svg" alt="" />
      </a>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/styles/login.scss';
</style>
